<!--
 * @Description: 登录页面
 * @Author: Ronda
 * @Date: 2021-06-29 09:16:46
 * @LastEditors: lucl
 * @LastEditTime: 2021-07-02 09:27:46
-->
<template>
  <div class="zong">
    <section>
      <div class="pattern">
        <div class="face face1"></div>
        <div class="face face2"></div>
      </div>
    </section>
    <div class="yijie" >易洁家政</div>
    <div class="yuangong" color="white">员工端</div>
    <van-form v-show="reform"  class="biaodan" @submit="onSubmit">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="onSubmit">登录</van-button>
      </div>
      <div class="zhuce">
        <span @click="to_register" class="bott">加入我们，注册一个呗</span>
      </div>
    </van-form>



     <van-form v-show="!reform"  class="biaodan" @submit="register">
      <van-field
        v-model="formre.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="formre.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="formre.Password"
        type="password"
        name="validator"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '密码不统一' ,validator  }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="onSubmit">注册</van-button>
      </div>
      <div class="zhuce">
        <span @click="to_register" class="bott">已经有账号了，点击登录</span>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login , registerEmployee } from "@/api/user";
import { setToken } from "@/utils/auth";
export default {
  data() {
    return {
      // 注册表单
      reform:1,
      form: {
        username: "",
        password: "",
      },
      formre:{},
    };
  },
  computed: {},
  methods: {
    validator(val){
      // console.log(1)
      return val==this.formre.password
    },
    // 注册
    to_register(){
      if(this.reform==1){
        this.reform--;
        this.form=={};
      }
      else{
        this.reform++;
        this.formre=={};
      }
    },
    // 提交行为
    async onSubmit(values) {
      // console.log(values);
      // console.log(this.form);
      // 发请求，获取到后台的token，保存到cookies里，获取当前登录的用户信息
      //axios、baseURL、qs、js-cookie
      let res = await login(this.form);
      // console.log(res.data.token);
      setToken(res.data.token);
      // 路由跳转
      this.$router.push("/index");
    },
    async register(){
      console.log(9)
      let a ={
        password:this.formre.password,
        username:this.formre.username
      }
      let res = await registerEmployee(a)
      // console.log(res)
      this.form={
        ...a
      }
      this.onSubmit()
      // setToken(res.data.token);
      // this.$router.push("/index");
    }
  },
  created() {},
  mounted() {},
};
</script>
<style>
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.zhuce{
  width: 100%;
  text-align: center;
}
.yijie{
  color: white;
  font-size: 30px;
  position:absolute;
  width: 100%;
  top: 15%;
  text-align: center;
}
.bott{
  font-size: 13px;
  color: #0099CC;
}

.yuangong{
  color: white;
  font-size: 15px;
  position:absolute;
  width: 100%;
  top: 23%;
  text-align: center;
}
/* 表单 */
.biaodan{
  position:absolute;
  width: 100%;
  top: 30%;
  background-color:white !important;
  /* border-radius: 8px;
  border-top-left-radius: 9px !important;
  border-top-right-radius: 9px !important; */
}
section{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.pattern{
  position:relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  /* animateBg是绑定动画的名称，10s是时间， ease-in-out是动画的过渡  ，infinte是动画的持续循环 */
  animation:animateBg 10s ease-in-out infinite
}
@keyframes animateBg{
  0%,100%{
    /* scale放大属性   rotate 旋转的角度   前面有正负数  deg是度 */
    transform:scale(1.6) rotate(-15deg);
  }
  50%{
    transform: scale(1.6)  rotate(15deg);
  }

}
.pattern .face{
  position: relative;
  width:100%;
  height: 50vh;
  /* background-color: blueviolet */
  background-image:linear-gradient(
      to bottom,
      blueviolet,
      #CC3399
      
    );
  background-size: 100px 100px;
  /* linear  匀速运动 */
  animation:animate 0.1s linear infinite
}
@keyframes animate{
  0%{
    background-position: 0;
  }
  100%{
    background-position: 100px;
  }
}
.pattern .face.face2{
  height: 100vh;
  /* 变换效果 */
  transform-origin:top;
  /* 变换以x轴旋转 */
  transform:rotateX(70deg);
}
.pattern .face1::before{
  content:"";
  position:absolute;
  bottom: 0;
  left: 0;
  width:100%;
  height: 125px;
  background:linear-gradient(0deg,rgba(0,0,0,0.5),transparent)
}
.pattern .face2::before{
  content:"";
  position:absolute;
  bottom: 0;
  left: 0;
  width:100%;
  height: 125px;
  background:linear-gradient(0deg,rgba(0,0,0,0.5),transparent)
}


</style>